<template>
  <ve-modal title="更换车牌号" v-model="visible" @cancel="onCancel" @confirm="onConfirm">
    <ve-form :noClass="false">
      <ve-form-item label="当前车牌号">{{ plateNumber }}</ve-form-item>
      <ve-form-item label="需要更换的车牌号" required :borderBottom="false">
        <ve-input v-model="form.licenseNo" placeholder="请输入需要更换的车牌号" />
      </ve-form-item>
    </ve-form>
  </ve-modal>
</template>
<script setup lang="ts">
  import { ref, computed } from 'vue'
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    plateNumber: {
      type: String,
      default: '',
    },
    id: {
      type: [String, Number],
      default: '',
    },
  })
  const emit = defineEmits(['update:visible', 'confirm', 'cancel'])

  const visible = computed({
    get() {
      return props.visible
    },
    set(val) {
      emit('update:visible', val)
    },
  })

  const form = ref({
    id: props.id,
    licenseNo: '',
  })

  const onCancel = () => {
    setTimeout(() => {
      form.value.licenseNo = ''
    }, 500)
    emit('update:visible', false)
    emit('cancel')
  }

  const onConfirm = () => {
    emit('confirm', form.value)
  }
</script>
<style scoped lang="less"></style>
